<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px #FFC125);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 200px;
        }

        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color: red;
        }

        .ol-popup-closer:after {
            content: "✖";
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>
</body>
<script>
    var tian_di_tu_satellite_layer = new ol.layer.Tile({
        title: "天地图卫星影像",
        // visible:false,
        source: new ol.source.XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=img_w&tk=51630dc20b36a8a6c248e19aec27c64d&x={x}&y={y}&l={z}'
        })
    });
    var tian_di_tu_road_layer = new ol.layer.Tile({
        title: "天地图路网",
        source: new ol.source.XYZ({
            url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=51630dc20b36a8a6c248e19aec27c64d&&x={x}&y={y}&l={z}"
        })
    });
    var tian_di_tu_annotation = new ol.layer.Tile({
        title: "天地图文字标注",
        source: new ol.source.XYZ({
            url: 'http://t4.tianditu.com/DataServer?T=cva_w&tk=51630dc20b36a8a6c248e19aec27c64d&&x={x}&y={y}&l={z}'
        })
    });

    var map = new ol.Map({
        target: 'map',
        layers: [tian_di_tu_satellite_layer, tian_di_tu_annotation],
        overlays: [],
        view: new ol.View({
            center: [127.131566, 46.920033],
            projection: 'EPSG:4326',
            zoom: 17
        }),
        //比例尺
        controls: ol.control.defaults()
    });


    var ces = new ol.source.Vector();
    cesguan = new ol.Feature({
        geometry: new ol.geom.Polygon([[
            [127.132206853415,46.9207600547788],
            [127.132268222068,46.9204039738745],
            [127.132579346866,46.9204432212688],
            [127.132522259747,46.9208064380629],
            [127.132206853415,46.9207600547788]]]),

    });



    ces.addFeature(cesguan);
    cesLayer1 = new ol.layer.Vector({
        source: ces,
        style:  new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#EA7D7DFF',
                width: 3,
            }),
            fill: new ol.style.Fill({
                color: 'rgba(234,125,125,0.5)',
            }),
        }),
    });
    map.addLayer(cesLayer1);



    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');
    var popup = new ol.Overlay({
        element: container,
        autoPan: true,
        positioning: 'bottom-center',
        stopEvent: false,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(popup);

    // 关闭popup
    closer.onclick = function () {
        popup.setPosition(undefined);
        closer.blur();
        return false;
    };

    map.on('click', function (e) {
        var coordinate = e.coordinate;
        var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
            return feature;
        });
        if (feature) {
            content.innerHTML = '';

            var cityName = document.createElement('h2');
            cityName.innerText = "北林村";
            content.appendChild(cityName);


            // // 弹出popup
            popup.setPosition(coordinate);
        }
    });
    // 监听鼠标移动事件，鼠标移动到feature区域时变为手形
    map.on('pointermove', function (e) {
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });
</script>
</html>